<template>
   <div>
      <el-dialog
         title="订单回款"
         v-model="dialogVisible"
         width="1200px"
         :close-on-click-modal="false"
      >
         <!-- 付款信息展示区域 -->
         <div class="payment-info">
            <div class="info-row">
               <div class="info-item">
                  <div class="label">订单类型</div>
                  <div class="value">出库单</div>
               </div>
               <div class="info-item">
                  <div class="label">出库单/采购退货单</div>
                  <div class="value">XS2402120001</div>
               </div>
               <div class="info-item">
                  <div class="label">出库单/出库退货日期</div>
                  <div class="value">2022-06-02</div>
               </div>
               <div class="info-item">
                  <div class="label">供应商/客户</div>
                  <div class="value">供应商一</div>
               </div>
               <div class="info-item">
                  <div class="label">出库/采购退货负责人</div>
                  <div class="value">刘一</div>
               </div>
               <div class="info-item">
                  <div class="label">总金额（元）</div>
                  <div class="value">4,000.00</div>
               </div>
               <div class="info-item">
                  <div class="label">待回款金额(元)</div>
                  <div class="value">4,000.00</div>
               </div>
            </div>
         </div>

         <!-- 付款详细信息 -->
         <div class="payment-details">
            <div style="display: flex; align-items: center">
               <div style="height: 15px; background-color: #6860ff; width: 2px; margin-right: 8px"></div>
               <div>
                  <h1>付款信息</h1>
               </div>
            </div>
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item label="回款金额">
                     <el-input placeholder="请输入" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="回款方式">
                     <el-select placeholder="请选择">
                        <el-optin
                           v-for="item in 5"
                           :key="item"
                           :label="item"
                           :value="item"
                        />
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="20">
               <el-col :span="12">
                  <el-form-item label="回款日期">
                     <el-input placeholder="请输入" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="备注">
                     <el-select placeholder="请选择">
                        <el-optin
                           v-for="item in 5"
                           :key="item"
                           :label="item"
                           :value="item"
                        />
                     </el-select>
                  </el-form-item>
               </el-col>
            </el-row>
         </div>

         <!-- 附件区域 -->
         <div class="attachments">
            <div style="display: flex; align-items: center; margin-bottom: 10px">
               <div style="height: 15px; background-color: #6860ff; width: 2px; margin-right: 8px"></div>
               <div>
                  <h1>附件</h1>
               </div>
            </div>
            <div class="attachments-list" >
               <div class="upload-box">
                  <el-button
                     ><el-icon><Upload /></el-icon>上传文件</el-button
                  >
                  <p>支持扩展名：.rar.zip.doc.docx.pdf .jpg..文档.docx 单个文件大小在500kb以内</p>
               </div>
               <div class="upload-progress">

               </div>
            </div>
         </div>
         <template #footer>
            <span class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
               <el-button
                  type="primary"
                  color="#6860FF"
                  >确定</el-button
               >
            </span>
         </template>
      </el-dialog>
   </div>
</template>

<script setup>
   import { ref, defineExpose } from "vue";

   const dialogVisible = ref(false);
   const approvalOpinion = ref("");

   defineExpose({
      open: () => {
         dialogVisible.value = true;
      },
   });
</script>

<style scoped lang="scss">
   .payment-info {
      background-color: #f4f5f7;
      padding: 20px;
      border-radius: 5px;
      .info-row {
         display: flex;
         justify-content: space-around;
         .info-item {
            //    display: flex;
            .value {
               color: #333;
               font-weight: 500;
            }
         }
      }
   }

   .payment-details {
      margin-top: 10px;
   }
   .attachments,
   .approval-opinion {
      margin-bottom: 20px;
      h3 {
         font-size: 16px;
         margin-bottom: 15px;
         font-weight: 500;
      }
   }

   .details-content {
      .details-row {
         display: flex;
         gap: 20px;
         margin-bottom: 15px;
         .details-item {
            flex: 1;
            .label {
               color: #666;
               margin-bottom: 8px;
               display: block;
            }
            .value-box {
               background-color: #f5f7fa;
               padding: 8px 12px;
               border-radius: 4px;
            }
         }
      }
   }

   .attachments-list {
      display: flex;
      .upload-box {
         flex: 1;
      }
      .upload-progress {
         flex: 1;
      }
   }

   .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
   }
   ::v-deep .el-dialog {
      --el-dialog-padding-primary: 0px;
   }
   ::v-deep .el-dialog__header {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
      font-weight: bold;
   }
   ::v-deep .dialog-footer {
      padding: 10px 16px;
      border-top: 1px solid #f0f0f0;
   }
   ::v-deep .el-dialog__headerbtn .el-dialog__close {
      color: #000;
   }
   ::v-deep .el-dialog__body {
      padding: 10px 10px;
   }
   :deep(.el-form-item__label) {
      justify-content: flex-start;
   }
   :deep(.el-form-item) {
      flex-direction: column;
      margin-bottom: 7px;
   }
   :deep(.el-select__wrapper) {
      background: #fafcfb;
   }
   :deep(.el-badge__content.is-fixed) {
      color: #666;
      border-radius: 3px;
      padding: 4px;
   }
   :deep(.el-table .cell) {
      display: flex;
      justify-content: center;
   }
   :deep(.el-button:hover) {
      color: #6860ff;
      background: #f4f5f7;
   }
   :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
      width: 100%;
   }
   :deep(.el-input__wrapper:hover) {
      box-shadow: inset 0 0 0 1px #6860ff;
   }
</style>
